<!-- 广场 -->
<template>
	<view>
		<view class="square_text-fd" :style="{background: bgColor}">
			<view style="padding: 20rpx 0rpx 20rpx 0rpx;" v-if="showSearch">
				<u-search placeholder="搜索话题" shape="square" :show-action="false" bg-color="white"
					@search="handleQuery" :clearabled="false"></u-search>
			</view>

			<view v-if="dtData.loading" class="u-flex flex-justify-content-center" style="width: 100%;height: 400rpx;">
				<image style='width:50rpx;height:50rpx;' src='/static/load.gif'></image>
			</view>	
			<view v-else>
				<view class="page-box-fd" v-if="dtData.data.length > 0">
					<view class="square_box-fd" v-for="(item, index) in dtData.data" :key="index">
						<view class="flex square_pd-fd">
							<view @click="jumpTo(item,0)" style="display: flex;">
								<u-image :src="item.headUrl" width="80" height="80" shape="circle">
									<view slot="error">
										<u-image src="/static/head-error.png" width="80" height="80"></u-image>
									</view>
								</u-image>
								<view class="square_pd2-fd">
									<view class="square_size-fd line-clamp-1">{{item.nickName}}</view>
									<view class="square_size2-fd">{{item.createTime}}</view>
								</view>
							</view>
							
							<view v-if="showSubscribe && item.isSubscribe == 0 && item.wxUserId != uid" class="square_btn-fd" :class="item.isSubscribe == 1?'circle_join-fd':'circle_join2-fd'" @click="handleJoin(item.wxUserId)">
								{{item.isSubscribe == 1?'已关注': '+ 关注'}}
							</view>
							<view v-if="showDel" class="del_btn" @click.stop="onDelete(item.id)">
								删除
							</view>
							<view v-if="showFavorite" class="del_btn favorite_btn" @click.stop="onFavorite(item.id)">
								取消收藏
							</view>
						</view>
						
						<view >
							<view class="square_pd4-fd line-clamp-2" @click="jumpTo(item,1)">
								{{item.content}}
							</view>
							<view class="flex square_pd5-fd" style="border: 0;">
								<view style="margin-right: 5rpx;z-index: 1;" class="square_img5-fd" v-for="(img,index2) in item.picsArr"
									:key="index2" v-if="item.contentType==0">
									<u-image :src="imageUrl + img" width="100%" height="100%" @click="previewImg(img,index2)">
									</u-image>
								</view>
								<view v-if="item.contentType==1">
									<video id="myVideo" :src="imageUrl+item.mediaFile" @error="videoErrorCallback"
										controls style="width: 518rpx;height: 300rpx;z-index:100"></video>
								</view>
							</view>
						</view>
						
						
						<!-- <view class="flex square_pd5-fd">
							<view class="square_btn2-fd" v-for="(e,index1) in item.labelNameList" :key="index1">#{{e}}</view>
						</view> -->
						<view class="dynamic-footer">
							<view class="square_size3-fd">
								<text class="line-clamp-1" v-if="item.circleName != null" style="color: #8e8e8e;">来自 - {{item.circleName}}</text>
							</view>
							
							<view class="flex flex-center">
								<view class="flex" @click="jumpTo(item,1)">
									<image src="/static/comment-1.png" style="width: 40rpx;height: 40rpx; margin: 0 10rpx;" mode="widthFix" />
									<view class="square_pd6-fd">{{item.commentNum}}</view>
								</view>
								<view class="flex" style="justify-content: space-between;margin-left: 20rpx;">
									<image style="width: 40rpx;height: 40rpx; margin: 0 10rpx;" :src="item.isZan == 1?'/static/dz-1.png':'/static/dz-0.png'"  @click="getLike(index)" mode="widthFix"></image>
									<view class="square_pd6-fd">{{item.zanNum}}</view>
								</view>
							</view>
						</view>
					</view>
					<!-- <u-loadmore :status="dtData.loadStatus" :bgColor="bgColor" margin-top="20"></u-loadmore> -->
				</view>
				<view class="page-box-fd" v-else>
					<!-- <view style="height: 400rpx;display: flex;justify-content: center;align-items: center;">
						<u-empty text="暂无数据" mode="list"></u-empty>
					</view> -->
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		name: "forum-dynamic",
		props: {
			datalist: {
				type: Object,
				default: {}
			},
			loading: {
				type: Boolean,
				default: true
			},
			// 是否显示搜索框
			showSearch: {
				type: Boolean,
				default: true
			},
			// 是否显示关注
			showSubscribe: {
				type: Boolean,
				default: false
			},
			// 是否显示删除
			showDel: {
				type: Boolean,
				default: false
			},
			// 显示是否收藏
			showFavorite: {
				type: Boolean,
				default:false
			},
			bgColor: {
				type: String,
				default: '#f2f2f2'
			},
			isJumpTo:{
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				imageUrl: this.imageUrl,
				dtData: {},
				uid: uni.getStorageSync('uid')
			}
		},
		computed: {
			getList() {
				this.dtData = this.datalist
			}
		},
		methods: {
			// 搜索
			handleQuery(e) {
				console.log(e)
				this.$emit("handleQuery", e)
			},
			//页面跳转
			jumpTo(item,type) {
				this.$emit("jumpTo",item,type)
				// if(this.isJumpTo){
				// 	uni.navigateTo({
				// 		url: url
				// 	})
				// }
			},
			// 圈子加入或取消
			handleJoin(id) {
				// console.log("id",id);
				this.$emit("onJoin", id);
			},
			getLike(index){
				this.$emit("getLike",index)
			},
			previewImg(url,index){
				let pics = this.dtData.data[index].picsArr.map(item => this.imageUrl + item);
				console.log(this.dtData.data[index].picsArr)
				console.log(pics)
				if(index===0 || index>0){
					uni.previewImage({
						current: this.imageUrl + url,
						urls: pics
					})
				}
				
			},
			// 删除
			onDelete(id) {
				this.$emit("onDelete", id);
			},
			// 收藏
			onFavorite(id) {
				// console.log(id)
				this.$emit("onFavorite", id);
			}
		}

	}
</script>

<style>
	.square_text-fd {
		padding: 10rpx 20rpx 20rpx 20rpx;
	}
	
	.square_img-fd {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50rpx;
	}
	
	.square_box-fd {
		background-color: white;
		margin-bottom: 10rpx;
		border-radius: 10rpx;
		border-bottom: 10rpx solid #F2F2F2;
	}
	
	.flex {
		display: flex;
	}
	
	.square_pd-fd {
		padding: 20rpx 0rpx 20rpx 30rpx;
	}
	
	.square_pd2-fd {
		width: 482rpx;
		padding: 0rpx 0rpx 0rpx 30rpx;
	}
	
	.square_size-fd {
		/* font-weight: 900; */
		font-size: 30rpx;
	}
	
	.square_size2-fd {
		margin-top: 10rpx;
		color: rgba(198, 198, 198, 1.0);
		font-size: 28rpx;
	}
	
	.square_btn-fd {
		width: 106rpx;
		height: 52rpx;
		color: white;
		padding: 6rpx 0rpx 10rpx 10rpx;
		font-size: 28rpx;
	}
	
	.square_pd4-fd {
		padding: 0rpx 15rpx 0rpx 30rpx;
		font-size: 32rpx;
	}
	
	.square_pd5-fd {
		padding: 15rpx 15rpx 0rpx 30rpx;
		font-size: 24rpx;
		border-bottom: 1px solid rgba(239, 239, 239, 1.0);
		flex-wrap: wrap;
	}
	
	.square_btn2-fd {
		font-weight: 700;
		border: 1px solid;
		border-radius: 50rpx;
		border-color: rgba(215, 215, 215, 1);
		height: 46rpx;
		padding: 5rpx 10rpx 0rpx 10rpx;
		margin-right: 20rpx;
		margin-bottom: 10rpx;
	}
	
	.square_size3-fd {
		color: #AAAAAA;
		font-size: 26rpx;
		
		width: 480rpx;
	}
	
	.square_img2-fd {
		width: 40rpx;
	}
	
	.square_pd6-fd {
		font-size: 28rpx;
		color: #8e8e8e;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.square_img3-fd {
		width: 34rpx;
		height: 38rpx;
		padding: 8rpx 10rpx 10rpx 20rpx;
	}
	
	.square_img5-fd {
		padding: 5rpx 5rpx 0rpx 10rpx;
		width: 200rpx;
		height: 212rpx;
	}
	
	.circle_join-fd {
		background-color: rgba(215, 215, 215, 1);
	}
	
	.circle_join2-fd {
		background-color: rgba(49, 202, 217, 1);
	}
	
	.del_btn {
		border: #ED8794 3rpx solid;
		color: #ED8794;
		width: 120rpx;
		height: 42rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.favorite_btn {
		border: #5f5f5f 3rpx solid;
		color: #767676;
		font-size: 22rpx;
	}
	
	.square_text-fd .dynamic-footer{
		display: flex;
		justify-content: space-between;
		padding: 10rpx 20rpx;
		align-items: center;
	}
</style>
